<template>
  <div class="topnav">
    <div class="left">
      <img src="@/assets/logo1.png" alt="" />
    </div>
    <div class="center" v-if="headernavlist">
      <template  v-if="headernavlist">
      <router-link
        v-for="(item, index) in headernavlist"
        :key="index"
        :to="{ path: item.menuright.url }"
      >
        {{ item.menuright.name }}
        <div class="bottomLine"></div>
      </router-link>
      </template>
    </div>
    <div class="right">
      <div class="msg" @click.stop="openMsg">
        <el-badge :value="msgNum.allCount" class="item">
          <img src="@/assets/myMessage.png" alt="" v-if="pover===false"/>
          <img src="@/assets/activeMes.png" alt="" v-else>
        </el-badge>
      </div>
      <div class="userArea">
        <div class="userInfo">
          <div class="des">
            <p class="p1" v-if="userInfo.type===4 && userInfo.departmentUserVo.length > 0">{{userInfo.departmentUserVo[0].departmentName}}</p>
            <p class="p1" v-else></p>
            <span class="span1" v-if="userInfo.type===4 "></span>
            <p class="p2" v-if="userInfo.type === 1">系统管理员</p>
            <p class="p2" v-else-if="userInfo.type === 2">学校管理员</p>
            <p class="p2" v-else-if="userInfo.type === 3">老师</p>
            <p class="p2" v-else-if="userInfo.type === 4">学生</p>
          </div>
          <div class="domany">
            <span class="many" :style="{ width: progresswidth + '%' }">
              <span class="showlv">{{ progresslv }}</span>
            </span>
          </div>
        </div>
        <span class="span2"></span>
        <el-popover placement="top-start" width="150" trigger="hover">
          <div style="text-align: center; margin: 0" class="avatardo">
            <router-link
              type="text"
              style="color: #1160cf"
              :to="{ path: '/mineinfo' }"
              >个人资料</router-link
            >
            <el-divider></el-divider>
            <router-link
              type="text"
              style="color: #1160cf"
              :to="{ path: '/mycomment' }"
              >我的评论</router-link
            >
            <el-divider></el-divider>
            <button type="text" style="color: #1160cf" @click="cancleOnload()">
              注销登录
            </button>
          </div>
          <div class="avatar" slot="reference">
            <img :src="userInfo.url" alt="" />
            <div class="namelength">
              <span>{{userInfo.name}}</span>
            </div>
          </div>
        </el-popover>
      </div>
    </div>
    <!-- @mouseleave="pover = !pover" -->
    <!-- @mouseleave="closeMsgBox" -->
    <div class="pover" v-show="pover" ref="pover" @mouseleave="closeMsgBox">
      <div class="poverHeader">
        <div
          @click="changeShow"
          class="comment"
          :class="showPover == 'comment' ? 'active' : ''"
        >
          评论(<span>{{ msgNum.commentCount }}</span
          >)
          <span class="line"></span>
        </div>
        <div
          @click="changeBack"
          class="week"
          :class="showPover == 'week' ? 'active' : ''"
        >
          周报(<span>{{ msgNum.weeklyCount }}</span
          >)
          <span class="line"></span>
        </div>
      </div>
      <div v-show="showPover == 'comment'" class="poverCon">
        <div class="scrollBox">
          <div v-if="commentList.length < 1" style="text-align:center;padding-top:50px;box-size:border-box">
            <span style="color: #999999">暂无评论消息</span>
          </div>
          <div v-else>
            <div
            v-for="comItem in commentList"
            :key="comItem.index"
            class="poverItem"
          >
            <p>{{comItem.msgName}}</p>
            <span class="type">{{ comItem.type ===1 ? '项目':'任务' }}：{{ comItem.typeName }}</span>
             <span class="status waiting" v-if="comItem.taskStatus == 1"
              >待开始</span
            >
            <span class="status ing" v-else-if="comItem.taskStatus == 2"
              >进行中</span
            >
            <span class="status complete" v-else-if="comItem.taskStatus == 3"
              >已完成</span
            >
            <span class="status waiting" v-if="comItem.projectStatus == 1"
              >待开始</span
            >
            <span class="status ing" v-else-if="comItem.projectStatus == 2"
              >进行中</span
            >
            <span class="status complete" v-else-if="comItem.projectStatus == 3"
              >已完成</span
            >
            <span class="time">{{ comItem.time }}</span>
          </div>
          </div>
        </div>
      </div>
      <div v-show="showPover == 'week'" class="poverCon">
        <div class="scrollBox">
          <div v-if="weekList.length < 1" style="text-align:center;padding-top:50px;box-size:border-box">
            <span style="color: #999999">暂无周报消息</span>
          </div>
          <div v-else>
            <div
            v-for="weekItem in weekList"
            :key="weekItem.index"
            class="poverItem"
          >
            <p>{{ weekItem.name }}</p>
            <p>{{weekItem.content}}</p>
            <span class="type">周报：{{ weekItem.typeName }}</span>
            <!-- <span class="status complete" v-if="weekItem.weeklyStatus == 2"
              >审核通过</span
            >
            <span class="status ing" v-else-if="weekItem.weeklyStatus == 1"
              >待审核</span
            >
            <span class="status error" v-else-if="weekItem.weeklyStatus == 3"
              >审核未通过</span
            > -->
            <span class="time">{{ weekItem.time }}</span>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCommentList, getWeekList, getMessageNum } from '@/api/header/header.js';
// import {getUserMsg} from '../../api/systemManage/user';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'headerNav',
  data() {
    return {
      showPover: 'comment',
      commentNum: 0,
      weekNum: 0,
      pover: false,
      progresswidth: 50,
      progresslv: 2,
      msgNum: 0,
      // 菜单列表
      headernavlist: [
        {
          name: '备课',
          url: '/lesson'
        },
        {
          name: '看板',
          url: '/board'
        },
        {
          name: '任务',
          url: '/task'
        },
        {
          name: '项目',
          url: '/project'
        },
        {
          name: '学生管理',
          url: '/stu-manage'
        },
        {
          name: '统计分析',
          url: '/statistics'
        },
        {
          name: '评分表管理',
          url: '/score-manage'
        },
        {
          name: '系统管理',
          url: '/system-manage'
        },
        {
          name: '成绩单',
          url: '/report-card'
        }
      ],
      // 评论列表
      commentList: [],
      // 周报列表
      weekList: [],
      // userInfo: {},
      statusImg: false // 给图片一个状态
    };
  },
  created() {
    // this.userInfo = JSON.parse(sessionStorage.getItem('userMessage'));
    // console.log(this.userInfo);
    this.headernavlist = JSON.parse(sessionStorage.getItem('userMenuList'));
    this.getMessage();
    this.getUserInfo();
  },
  mounted() {
    document.addEventListener('click', this.closeMsg);
  },
  methods: {
    ...mapActions(['getUserInfoAsync']),
    // 注销登录
    cancleOnload() {
      this.$confirm(
        '是否注销当前用户？',
        '提示:',
        {
          confirmButtonText: '确定',
          cancleButtonText: '取消',
          type: 'wanring'
        }
      ).then(() => {
        sessionStorage.clear();
        this.$router.replace('/');
      });
    },
    // 选择评论
    changeShow() {
      this.weekList = [];
      this.showPover = 'comment';
    },
    // 选择周报
    async changeBack() {
      this.commentList = [];
      this.showPover = 'week';
      // 获取周报
      const res2 = await getWeekList(sessionStorage.getItem('userid'));
      // console.log('周报', res2);
      this.weekNum = res2.data.list.length;
      this.weekList = res2.data.list;
      // getWeekList(Number(sessionStorage.getItem('userId'))).then(res => {
      //   console.log(res);
      // });
    },
    closeMsg(e) {
      // console.log(this);
      // let self = this;
      // if (self.pover === true && !this.$refs.pover.contains(e.target)) {
      //   self.pover = false;
      // }
      this.getMessage();
    },
    // 鼠标移走时关闭弹框
    closeMsgBox() {
      this.pover = false;
      // console.log(11)
      this.showPover = 'comment';
      this.getMessage();
    },
    // 获取消息总数
    async getMessage() {
      // 获取消息总数
      const res3 = await getMessageNum(sessionStorage.getItem('userid'));
      // console.log('消息总数', res3);
      this.msgNum = res3.data;
    },
    // 点击评论
    async openMsg() {
      // console.log(111);
      this.pover = !this.pover;
      // 获取评论
      const res = await getCommentList(sessionStorage.getItem('userid'));
      // console.log('评论', res);
      this.commentNum = res.data.list.length;
      this.commentList = res.data.list;
    },
    // 获取用户信息
    async getUserInfo() {
      await this.getUserInfoAsync({id: sessionStorage.getItem('userid')});
      // console.log('用户信息', this.userInfo);
      this.progresswidth = (this.userInfo.priority) / 3;
      this.progresslv = this.userInfo.priority;
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.topnav {
  width: 100%;
  height: 90px;
  background-color: #08051c;
  display: flex;
  justify-content: space-between;
  position: relative;
  .left {
    width: 194px;
    height: 100%;
    background: url("~@/assets/navbg.png") no-repeat center center;
    background-size: 100% 100%;

    img {
      width: 145px;
      height: 100%;
    }
  }
  .center {
    width: 40%;
    height: 100%;
    padding-left: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      display: block;
      font-size: 18px;
      text-align: center;
      .bottomLine {
        transition: all 0.5s;
        margin: 0 auto;
        margin-top: 10px;
        width: 40px;
        height: 0;
        background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
        border-radius: 4px;
      }
    }
    a:hover {
      .bottomLine {
        height: 8px;
      }
    }
    .router-link-exact-active {
      .bottomLine {
        margin-top: 10px;
        width: 36px;
        height: 8px;
        background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
        border-radius: 4px;
      }
    }
  }
  .right {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    .msg {
      margin-right: 55px;
      width: 90px;
      height: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      transition: all 0.3s;
      img {
        width: 33px;
        height: 39px;
      }
      /deep/.el-badge {
        position: relative;
        right: -30%;
        .el-badge__content {
          margin-right: 4px;
          width: 20px;
          height: 20px;
        }
      }
    }
    // .msg:hover {
    //   background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
    // }
    .userArea {
      height: 75px;
      width: 300px;
      margin-right: 20px;
      display: flex;
      justify-content: space-between;

      .userInfo {
        width: 198px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .des {
          width: 100%;
          height: 25px;
          // font-size: 18px;
          display: flex;
          justify-content: space-between;

          .span1 {
            width: 4px;
            height: 15px;
            background-color: #e6e2fd;
            border-radius: 5px;
            align-self: center;
          }
          p {
            margin: 0;
            font-size: 18px;
            font-weight: 400;
            color: #e6e2fd;
            line-height: 25px;
          }
        }
        .domany {
          position: relative;
          left: -15px;
          border: 1px solid #fff;
          width: 200px;
          height: 20px;
          border-radius: 15px;
          margin: 0 10px;
          padding: 4px;
          .many {
            display: block;
            height: 100%;
            background: linear-gradient(270deg, #ffd28f 0%, #ffffff 100%);
            border-radius: 10px;
            line-height: 23px;
            color: white;
            position: relative;
            .showlv {
              font-size: 12px;
              line-height: 23px;
              position: absolute;
              right: 0;
              top: -2px;
              color: #e7771c;
              display: block;
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background-image: url("../../assets/level.png");
              background-size: contain;
              background-repeat: no-repeat;
              font-weight: bolder;
              text-align: center;
              // background: #ffffff;
              box-shadow: 2px 2px 4px 0px rgba(170, 126, 59, 0.58);
            }
          }
        }
        .avatardo router-link:hover{
          background-color: #1160cf;

        }
      }
      .span2 {
        width: 1px;
        height: 75px;
        background: #ffffff;
        border-radius: 3px;
      }
      .avatar {
        width: 70px;
        height: 100%;
        // border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        img {
          border-radius: 50%;
          box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
          border: 2px solid #FFFFFF;
          width: 50px;
          height: 50px;
        }
        .namelength {
          width: 90px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
  .pover {
    position: absolute;
    top: 90px;
    right: 200px;
    width: 490px;
    height: 570px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    box-shadow: 2px 2px 4px 0px rgba(153, 153, 153, 0.5);
    z-index: 999;
    .poverHeader {
      width: calc(100% - 30px);
      padding: 15px;
      height: 25px;
      background: #f1f5ff;
      display: flex;
      div {
        width: 50%;
        height: 100%;
        line-height: 25px;
        text-align: center;
        cursor: pointer;
        color: #111;
        font-size: 15px;
        font-weight: bold;
        position: relative;
        .line {
          display: inline-block;
          position: absolute;
          bottom: -7px;
          right: 42%;
          width: 37px;
          height: 0;
          border-radius: 4px;
          background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
          transition: all 0.3s;
        }
      }
      div:hover {
        .line {
          height: 8px;
        }
      }
      .active {
        .line {
          height: 8px;
        }
      }
      .comment {
        border-right: 1px solid white;
      }
      .week {
        border-left: 1px solid white;
      }
    }
    .poverCon {
      width: 100%;
      height: 500px;
      .scrollBox {
        width: 100%;
        height: calc(100% - 70px);
        // padding: 10px 0;
        // margin: 0 auto;
        overflow-y: auto;
        .poverItem {
          position: relative;
          padding: 8px 16px;
          margin: 13px 20px;
          transition: all 0.3s;
          padding-bottom: 5px;
          border-bottom: 1px solid #f2f2f2;
          p {
            // margin-top: 5px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .type {
            color: #555;
            width: 200px;
            display: inline-block;
            white-space:nowrap;
            // display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            // height: 30px;
            margin-right: 10px;
          }
          .type::before {
            position: relative;
            bottom: -3px;
            content: "";
            display: inline-block;
            width: 5px;
            height: 20px;
            background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%);
            border-radius: 3px;
            margin-right: 5px;
          }
          .status{
            position: absolute;
            bottom: 10px;
          }
          .status::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            margin: 0 5px;
          }
          .complete {
            color: #3ea528;
          }
          .complete::before {
            background: #3ea528;
          }
          .ing {
            color: #ffd167;
          }
          .ing::before {
            background: #ffd167;
          }
          .waiting {
            color: #555;
          }
          .waiting::before {
            // position: relative;
            background: #555;
          }
          .time {
            position: absolute;
            bottom: 10px;
            right: 20px;
          }
        }
      }
      .poverItem:hover {
        background: #2fc0e0;
        color: white;
        .type {
          color: white;
        }
        .type::before {
          background: white;
        }
        .status {
          color: white;
          // position: relative;
        }
        .status::before {
          background: white;
        }
      }
    }
  }
}
</style>
